import {defineStore} from 'pinia';
import { ref } from 'vue';
import {useStorage} from '@vueuse/core';

// ref() 就是 state 属性
// computed() 就是 getters
// function() 就是 actions
export const useThemeStore=defineStore("theme",()=>{
    //useStorage 将数据和localstorage中数据进行绑定 并且有响应式，和持久性
    //一开始赋值为初始值 而后在对应的字段存在时使用对应的值
    const isCollapse = useStorage("isCollapse",false);
    const horizonalMenu = ref(true);
    const themeType=useStorage("theme","light")
    // const themeType = ref("light");
    function toggleCollapse() {
        isCollapse.value = !isCollapse.value;
    }
    function toggleHorizonalMenu() {
        horizonalMenu.value = !horizonalMenu.value;
    }
    function changeTheme() {
        themeType.value = this.themeType === "light" ? "dark" : "light";
    }
    function clearLocalStorage() {
        //退出时 清空所有token
        localStorage.clear(); 
    }
    return {
        themeType,
        changeTheme,
        isCollapse,
        toggleCollapse,
        horizonalMenu,
        toggleHorizonalMenu,
        clearLocalStorage
    }
})